<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>ProjectUserCooperation-ProjectManagment</title>
    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport'/>
    <link rel="icon" th:href="@{/assets/img/icon.ico}" type="image/x-icon"/>
    <div th:replace="commom/bar :: commom_css"></div>

</head>
<body>
<div class="wrapper">
    <div th:replace="commom/bar :: topbar"></div>
    <!-- Sidebar -->
    <div th:replace="commom/bar :: projectsidebar"></div>
    <!-- End Sidebar -->
    <div class="main-panel">
        <div class="content">
            <div class="page-inner">
                <div class="page-header">
                    <h4 class="page-title">项目合作</h4>
                    <ul class="breadcrumbs">
                        <li class="nav-home">
                            <a th:href="@{/}">
                                <i class="flaticon-home"></i>
                            </a>
                        </li>
                        <li class="separator">
                            <i class="flaticon-right-arrow"></i>
                        </li>
                        <li class="nav-item">
                            <a th:href="@{/projects_view/{id}(id=${project.id})}">项目主面板</a>
                        </li>
                        <li class="separator">
                            <i class="flaticon-right-arrow"></i>
                        </li>
                        <li class="nav-item">
                            <a th:href="@{/project_user_cooperation_view/{id}(id=${project.id})}">项目合作</a>
                        </li>
                    </ul>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title"><h3>推荐人员</h3></div>
                            </div>
                            <div class="card-body">
                                <div class="card-list">
                                    <div class="card-body pb-0">
                                        <!-- 分页容器：显示数据 -->
                                        <div id="UserDiv"></div>
                                    </div>
                                    <div class="card-footer">
                                        <!-- 分页容器： 显示分页按钮-->
                                        <div class="text-right mt-3 mb-3">
                                            <!-- 注意:3版本的分页容器标签是<ul>，2版本的容器标签是<div> -->
                                            <ul id="UserPage" class="pagination"></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header"><h3>概览</h3></div>
                            <div class="card-body">
                                <div class="card-body row">
                                    <div class="col-md-6">
                                        <h3>名称：</h3>
                                        <div class="form-group form-group-default">
                                            <span class="mb-1 fw-bold" id="personInformationName"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <h3>邮箱：</h3>
                                        <div class="form-group form-group-default">
                                            <span class="mb-1 fw-bold" id="personInformationEmail"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <span class="card-title"><h3>参与项目</h3></span>
                            </div>
                            <div class="card-body">
                                <div class="row" id="userProjects">
                                    <div class="col-md-12">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <div class="col-md-12" id="calendarDevote" style="height:200px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--model框-->
<div th:replace="commom/bar :: uploadfilemodel"></div>
<div th:replace="commom/bar :: newprojectpackage"></div>
<div class="modal fade" id="inviteUserModel" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header no-bd">
                <h5 class="modal-title">
                        <span class="fw-mediumbold">
                            Invite User</span>
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6 pr-0">
                        <div class="form-group form-group-default">
                            <label>用户名</label>
                            <input id="inviteUserModelProjectId" name="inviteUserModelProjectId" type="hidden">
                            <input id="inviteUserModelUserId" name="inviteUserModelUserId" type="hidden">
                            <input id="inviteUserModelUsername" name="inviteUserModelUsername" type="text"
                                   class="form-control" placeholder="UserName" readonly>
                        </div>
                    </div>
                    <div class="col-md-6 pr-0">
                        <div class="form-group form-group-default">
                            <label>权限</label>
                            <select name="inviteUserModelDuty" id="inviteUserModelDuty" class="form-control">
                                <option value="2">管理员</option>
                                <option value="3">开发者</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer no-bd">
                <button type="button" class="btn btn-primary" onclick="intite()">invite</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!--公共JS-->
<th:block th:replace="commom/bar :: commom_js"/>
<!--公共JS-->
<th:block th:replace="commom/bar :: nav_project_js"/>

<!--加载人才市场,邀请人员-->
<script type="text/javascript">
    $(function () {
        addpage(projectId, 1, UserDiv, UserPage);
    })

    function addpage(projectId, market, div, ul) {
        pageStart();//开始分页
        function pageStart() {//分页函数
            $.ajax({ //去后台查询第一页数据
                type: "get",
                url: "/projectUserPage",
                dataType: "json",
                data: {
                    page: '1',
                    projectId: projectId,
                    market: market
                }, //参数：当前页为1
                success: function (data) {
                    appendHtml(data.list)//处理第一页的数据
                    appendPersonInformationHtml(data.list[0].id)
                    var options = {//根据后台返回的分页相关信息，设置插件参数
                        bootstrapMajorVersion: 3, //如果是bootstrap3版本需要加此标识，并且设置包含分页内容的DOM元素为UL,如果是bootstrap2版本，则DOM包含元素是DIV
                        currentPage: data.page, //当前页数
                        totalPages: data.totalPage, //总页数
                        numberOfPages: data.pageSize,//每页记录数
                        itemTexts: function (type, page, current) {//设置分页按钮显示字体样式
                            switch (type) {
                                case "first":
                                    return "首页";
                                case "prev":
                                    return "上一页";
                                case "next":
                                    return "下一页";
                                case "last":
                                    return "末页";
                                case "page":
                                    return page;
                            }
                        },
                        onPageClicked: function (event, originalEvent, type, page) {//分页按钮点击事件
                            $.ajax({//根据page去后台加载数据
                                url: "/projectUserPage",
                                type: "get",
                                dataType: "json",
                                data: {
                                    "page": page,
                                    projectId: projectId,
                                    market: market
                                },
                                success: function (data) {
                                    appendHtml(data.list);//处理数据
                                }
                            });
                        }
                    };
                    $(ul).bootstrapPaginator(options);//设置分页
                }
            });
        }

        function appendHtml(list) {//此函数用于处理后台返回的数据，根据自己需求来实现页面拼接
            $(div).html("");
            var tableShow = '';
            for (var i = 0; i < list.length; i++) {
                tableShow += '<div class="item-list" onclick="appendPersonInformationHtml(' + list[i].id + ')">\n' +
                    '               <div class="avatar">\n' +
                    '                 <img src="/files/photo/' + list[i].photo + '" alt="..." class="avatar-img rounded-circle">\n' +
                    '               </div>\n' +
                    '               <div class="info-user ml-3">\n' +
                    '               <div class="username" id="toUsername' + list[i].id + '"> ' + list[i].username + '</div>\n' +
                    '                   <div class="status">' + list[i].tag + '</div>\n' +
                    '               </div>\n' +
                    '               <button class="btn btn-icon btn-primary btn-round btn-sm" onclick="inviteModel(' + projectId + ',' + list[i].id + ')">\n' +
                    '                       <i class="fa fa-plus"></i>\n' +
                    '               </button>\n' +
                    '             </div>'
            }
            $(div).html(tableShow)
        }
    }
</script>
<!--邀请项目人员弹出框-->
<script type="text/javascript">
    function inviteModel(projectId, toUserId) {
        var toUsername = $('#toUsername' + toUserId).text();
        checkLoginAndPowerAndDoFunction(inviteDo, projectId, toUserId, toUsername)
    }

    function inviteDo(arguments) {
        for (var i = 0; i < arguments.length; i++) {
            console.log(arguments[i])
        }
        $('#inviteUserModel').modal('show');
        $('#inviteUserModelProjectId').val(arguments[1]);
        $('#inviteUserModelUserId').val(arguments[2]);
        $('#inviteUserModelUsername').val(arguments[3]);
    }

    function intite() {
        var projectId = $('#inviteUserModelProjectId').val();
        var toUserId = $('#inviteUserModelUserId').val();
        $.ajax({
            type: "post",
            url: "/inviteUser",
            data: {
                projectId: projectId,
                toUserId: toUserId
            },
            success: function (result) {
                if (result.ok) {
                    swal({
                        icon: "success",
                        text: result.message,
                        typd: "success",
                        buttons: false,
                        timer: 1500,
                    });
                } else {
                    swal({
                        icon: "warning",
                        text: result.message,
                        type: "warning",
                        buttons: false,
                        timer: 1500,
                    })
                }
            }
        })
    }
</script>
<!--人员信息-->
<script type="text/javascript">
    function appendPersonInformationHtml(userId) {
        $.ajax({
            type: "get",
            url: "/user_information",
            dataType: "json",
            data: {
                userId: userId
            },
            success: function (json) {
                $("#personInformationName").text(json.username);
                $("#personInformationEmail").text(json.email);
                userProject(json.myprojectsList);
                //获取当前年份
                var myDate = new Date();
                var tYear = myDate.getFullYear();
                calendarDevote(tYear, json.userCodeUpdateRecordList);
            }
        })
    }
</script>
<!--加载用户项目-->
<script type="text/javascript">
    function userProject(myprojectsList) {
        console.log(myprojectsList)
        $(userProjects).html("");
        var userProjectDiv = '';
        if (myprojectsList.length != 0) {
            for (var i = 0; i < myprojectsList.length && i < 2; i++) {
                userProjectDiv += '<div class="col-md-6">\n' +
                    '                                            <div class="form-group form-group-default">\n' +
                    '                                                <div class="col-md-12 row">\n' +
                    '                                                    <div class="col-md-8">\n' +
                    '                                                        <a href="/projects_view?projectId=' + myprojectsList[i].projectId + '">\n' +
                    '                                                            <h2 style="color: #145180">\n' +
                    '                                                                <i class="fas fa-file-alt"></i>' + myprojectsList[i].projectName + '\n' +
                    '                                                            </h2>\n' +
                    '                                                        </a>\n' +
                    '                                                    </div>\n' +
                    '                                                    <div class="col-md-4 text-right">\n' +
                    '                                                        <a style="color: #F29F3F">' +
                    '                                                           <i class="fas fa-star"></i><span>' + myprojectsList[i].storeCount + '</span>\n' +
                    '                                                        </a>' +
                    '                                                        <a style="color:#C1194E">' +
                    '                                                        <i class="fas fa-heart"></i><span>' + myprojectsList[i].likeCount + '</span>\n' +
                    '                                                        </a>' +
                    '                                                    </div>\n' +
                    '                                                    <div class="col-md-6">\n' +
                    '                                                    <span style="color: #4e555b">\n' +
                    '                                                        <i class="fas fa-user-tie"></i>项目管理员：' + myprojectsList[i].chargeUser + '\n' +
                    '                                                    </span>\n' +
                    '                                                    </div>\n' +
                    '                                                    <div class="col-md-6">\n' +
                    '                                                    <span style="color: #4e555b">\n' +
                    '                                                            <i class="fab fa-codiepie"></i>项目进度：' + myprojectsList[i].schedule + '\n' +
                    '                                                    </span>\n' +
                    '                                                    </div>\n' +
                    '                                                    <div class="col-md-6">\n' +
                    '                                                    <span style="color: #4e555b">\n' +
                    '                                                            <i class="far fa-arrow-alt-circle-up"></i>上传次数：' + myprojectsList[i].codeUpdateCount + '\n' +
                    '                                                    </span>\n' +
                    '                                                    </div>\n' +
                    '                                                    <div class="col-md-6">\n' +
                    '                                                    <span style="color: #4e555b">\n' +
                    '                                                            <i class="far fa-arrow-alt-circle-up"></i>他的上传次数：' + myprojectsList[i].myUpdateCount + '\n' +
                    '                                                    </span>\n' +
                    '                                                    </div>\n' +
                    '                                                </div>\n' +
                    '                                            </div>\n' +
                    '                                        </div>'
            }
        } else {
            userProjectDiv += '<div class="form-group form-group-default">\n' +
                '                                                <span class="text-center">\n' +
                '                                                    <h1>暂无参与项目</h1>\n' +
                '                                                </span>\n' +
                '                                            </div>'
        }
        $(userProjects).html(userProjectDiv)
    }
</script>
<!--日历图-->
<script type="text/javascript">
    var myCharts;

    function calendarDevote(year, json) {
        myCharts = echarts.init(document.getElementById('calendarDevote'));

        function getVirtulData(year) {
            var date = +echarts.number.parseDate(year + '-01-01');
            var end = +echarts.number.parseDate(year + '-12-31');
            var dayTime = 3600 * 24 * 1000;
            var data = [];
            for (var time = date, i = 0; time <= end; time += dayTime) {
                var timeString = echarts.format.formatTime('yyyy-MM-dd', time);
                if ((i < json.length) && (timeString == echarts.format.formatTime('yyyy-MM-dd', json[i].time))) {
                    data.push([
                        timeString,
                        json[i].codeUpdateCount
                    ]);
                    i++;
                } else {
                    data.push([
                        timeString,
                        0
                    ]);
                }
            }
            return data;
        }

        var option = {
            title: {
                top: 0,
                left: 'center',
                text: year + '每天提交代码次数'
            },
            tooltip: {},
            visualMap: {
                min: 0,
                max: 10,
                type: 'piecewise',
                orient: 'horizontal',
                left: 'center',
                top: 30,
                textStyle: {
                    color: '#000'
                },
                inRange: {
                    color: ['#eeeeee', '#177dff']
                }
            },
            calendar: {
                top: 80,
                left: 30,
                right: 30,
                cellSize: ['auto', 12],
                range: year,
                yearLabel: {show: false}
            },
            series: {
                type: 'heatmap',
                coordinateSystem: 'calendar',
                data: getVirtulData(year)
            }
        };
        myCharts.setOption(option);
    }
</script>
</body>
</html>